<template>
	<view>
		<view class="card-lists padding" v-if="lists.length>0">
			<view class="card-item flex text-white align-center padding margin-bottom-sm justify-between"
				v-for="(item,index) in lists" :key="index" @click="handleClick(item)">
				<view class="left-info margin-right-sm flex flex-direction justify-around align-start">
					<text class="text-xl">{{item.bank_name}}</text>
					<text>储蓄卡</text>
				</view>
				<view class="right-info flex flex-direction justify-around align-end">
					<text class=" text-bold text-lg">{{item.account_id}}</text>
					<text class="cu-tag line-white round" @click.stop="deleteCard(item)">删除</text>
				</view>
			</view>
		</view>
		<fu-empty-ui v-if="lists.length == 0 && isInit"></fu-empty-ui>
		<button class="bottom-btn" @click="handleJump" data-url="/pages/wallet/card-bind/index">添加银行卡</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isInit:false,
				lists:[],
				is_change:0 ,//是否是选择
				backData: null, // 选择低脂模式下的返回值
			}
		},
		onLoad(option) {
			if(option.is_change){
				this.is_change = option.is_change
			}
		},
		onShow() {
			this.get_withdraw_account()
		},
		/**
		 * @description 页面出栈
		 */
		onUnload() {
		  // 如果是选择地址模式
		  if (this.is_change == 1) {
		    // 通知下单页或其他页面当前选择的地址信息
		    uni.$emit("select_card", this.backData);
		  }
		},
		methods: {
			// 删除银行卡
			deleteCard(item){
				let _this = this;
				this.$util.showModal({
					title: '提示',
					content: '确认删除此银行卡？',
					success: () => {
						_this.$api.post(global.apiUrls.postUserCardDelte, {
							account_type: 3,
							account_id:item.account_id
						}).then(res => {
							this.get_withdraw_account()
						});
					}
				})
			},
			/**
			 * @description 银行卡点击事件
			 * @param {object} item = 地址详细信息
			 */
			handleClick(item) {
			  // 如果是地址选择模式,返回地址对象设为当前选中地址信息,否则不做操作
			  if (this.is_change == 1) {
			    this.backData = item;
			    uni.navigateBack();
			  }
			},
			get_withdraw_account() { //获取用户已绑定的账户信息
				this.$api.post(global.apiUrls.getWithdrawAccount, {
					account_type: 3
				}).then(res => {
					if (res.data.code == 1) {
						this.lists = res.data.data;
						this.isInit = true;
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F2F2F2;
	}

	.card-lists {
		.card-item {
			width: 100%;
			height: 187rpx;
			// background: url('/my/bank-bg.png') no-repeat;
			background-size: 100% 100%;

			.left-info {
				height: 130rpx;
			}

			.right-info {
				height: 130rpx;

				.cu-tag {
					width: 103rpx;
					height: 44rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
	.bottom-btn {
	  position: fixed;
	  bottom: 40rpx;
	  bottom: calc(40rpx + constant(safe-area-inset-bottom));
	  bottom: calc(40rpx + env(safe-area-inset-bottom));
	  left: 32rpx;
	  right: 32rpx;
	  height: 88rpx;
	  line-height: 88rpx;
	  text-align: center;
	  font-size: 30rpx;
	  color: #ffffff;
	  background: $bgtheme;
	  border-radius:12rpx;
	}
</style>
